<script lang="ts" setup>
interface UniInput {
    detail: { value: string }
}

const {paddingRight} = defineProps<{
    password?: boolean
    paddingRight?: string
    modelValue: any
    placeholder: string
}>()

const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()

const pr = $computed(() => {
    return paddingRight ?? '0'
})

</script>

<template>
    <view relative>
        <input text="28" :value="modelValue" :password="password" :placeholder="placeholder"
               placeholder-class="text-#999999"
               class="b b-#797979 h-90 box-border pl-3 p_right border-solid"
               @input="emit('update:modelValue', ($event as unknown as UniInput).detail.value)">
        <view absolute top-0 right-0 h-full>
            <slot/>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.p_right {
    padding-right: v-bind(pr);
}
</style>
